<style lang="less">
  .echarts-pie {
    width: 100%;
    height: 100%;
  }
.echarts-tooltip--pie {
  width: 178px;
  height: 48px;
  box-sizing: border-box;
  padding: 8px;
  background: rgba(244, 245, 247, 0.92) !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute;
  right: -5000px;
}
</style>
<template>
  <div class="echarts-pie" ref="echartsDomRef"></div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import * as echarts from "echarts";

interface PropsType {
  seriesData: Array<{ value: string | number; name: string }>;
}

const props = defineProps<PropsType>();

const myEcharts = ref();
const echartsDomRef = ref();
let options = reactive({
  tooltip: {
    trigger: "item",
    className: "echarts-tooltip--pie",
    formatter: function (params: {
      marker: string;
      name: string;
      value: string;
    }) {
      let formatterText = `
      <div style="height:32px;display:flex;justify-content: space-between;align-items: center;background: #fff; padding: 0 8px;">
        <span>
          ${params.marker} ${params.name}
        </span>
        <span><span style="font-weight: 600;">${params.value}</span>人</span>
      </div>
       `;
      return formatterText;
    },
  },
  legend: {
    bottom: 0,
    left: "center",
    icon: "circle",
    itemGap: 24,
    data: (function () {
      let legendData: Array<string> = [];
      props.seriesData.forEach((it) => {
        legendData.push(it.name);
      });
      return legendData;
    })(),
  },
  series: [
    {
      // name: "Access From",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      center: ["50%", "40%"],
      label: {
        position: "outside",
        formatter: "{d}%",
      },
      labelLine: {
        length: 3,
        length2: 10,
      },
      emphasis: {
        disabled: true,
      },
      data: props.seriesData,
    },
  ],
});

onMounted(() => {
  myEcharts.value = echarts.init(echartsDomRef.value);
  myEcharts.value.setOption(options);
});
</script>
